<template>
  <div class="main">
    <div
      style="width:100%; height:40px; background-color:#fff; margin-bottom:20px; padding: 0px;">当前模块:<span style="font-weight: bold">设置本区开设的教学课程与当前学期 (学科与学期管理)
      </span>
    </div>
    <div class="main-body">
      <el-row>
        <el-col :span="9">
          <div class="main-header float-left" style="display: flex">
            <div style="text-align: center; margin-right: 60px">
              学期与年级、学籍关系表
            </div>
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
              size="mini"
            >
              <el-form-item label="">
                <el-select v-model="formInline.xq" placeholder="请选择"  @change="onChange">
                  <el-option
                    v-for="item in ddl_lb_list"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="dialogVisible = true" icon="el-icon-plus">新增学期</el-button>
              </el-form-item>
            </el-form>
          </div>
          <!-- 新增弹窗 -->
          <el-dialog title="新增学期操作窗口" :visible.sync="dialogVisible" width="30%">
            <div>新增学期:<el-input v-model="input" placeholder="请输入内容" style="width:70%"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false">提 交</el-button>
            </span>
          </el-dialog>





          <!-- 左边滚动表格 -->
          <div class="main-center float-left">
            <el-table
              :data="tableData.slice((formInline.currentPage - 1) * formInline.limit, formInline.currentPage * formInline.limit)"
              height="650"
              style="width: 100%; margin-top: 6px"
              :header-cell-style="{
                background: '#fafafa',
                color: '#000000e0',
                fontWeight: 600
              }"
            >
              <el-table-column prop="XQ" label="学期"></el-table-column>
              <el-table-column prop="NJMC" label="年级"></el-table-column>
              <el-table-column prop="XJ" label="学籍"></el-table-column>
              <el-table-column fixed="right" label="管理">
                <template slot-scope="scope">
                  <el-button type="text" size="small" style="color: #ff4d4f" @click="delclick(scope.row)" icon="el-icon-delete">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <div class="footer-pagination">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="formInline.currentPage"
                :page-sizes="[10, 20, 30, 50, 100, 200, 300, 500]"
                :page-size="formInline.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="formInline.total"
              >
              </el-pagination>
            </div>
          </div>
        </el-col>
        <el-col :span="13" style="margin-left: 100px">
          <div class="main-header float-left" style="display: flex">
            <div style="text-align: center; margin-right: 160px">本区中小幼类学校开设的教学课程清单</div>
            <el-form
              :inline="true"
              :model="formInline"
              @change="onChange"
              class="demo-form-inline"
              size="mini"
            >
              <el-form-item>
                <el-button type="primary" @click="dialogVisible1 = true" icon="el-icon-plus">新增课程</el-button>
              </el-form-item>
            </el-form>
          </div>
         
           <!-- 新增课程弹窗 -->
           <el-dialog title="本区开设课程操作窗口" :visible.sync="dialogVisible1" width="50%">
            <div style="display: flex;">
              <div>
                <span style="margin-right:6px;">课程名称 :</span>
                <el-input v-model="input" placeholder="请输入内容" style="width:70%"></el-input>
              </div>

            <div style="margin-left: 20px;">
              <span style="margin-right:6px;">课程代码 :  </span>
              <el-input v-model="input" placeholder="请输入内容" style="width:70%;"></el-input>
            </div>
            </div>
            <div style="margin-top:15px;">
              <span style="margin-right:6px;">开设学段 :  </span>
              <el-input v-model="input" placeholder="请输入内容" style="width:70%"></el-input></div>
            <div style="display: flex; margin-top:15px;">
              <span style="margin-right:6px; margin-top:10px;">课程属性 :  </span>
              <div style="border: 1px solid #e0e3e9; width:30%; height: 40px; text-align: center; line-height: 40px; border-radius: 5px;">
                <el-radio v-model="radio" label="1">考试</el-radio>
                <el-radio v-model="radio" label="0">非考试</el-radio>
              </div>

              <span style="margin-left:15px; margin-top:10px;">启动状态 : </span>
              <div style="border: 1px solid #e0e3e9; width:30%; height: 40px; text-align: center; line-height: 40px; border-radius: 5px;">
                <el-radio v-model="radio" label="1" disabled>启动</el-radio>
                <el-radio v-model="radio" label="0" disabled>停用</el-radio>
              </div>

            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false">提 交</el-button>
            </span>
          </el-dialog>




           <!--右边滚动表格 -------------------- -->
          <div class="main-center float-left">
            <el-table
              :data="tableData2.slice((formInline2.currentPage - 1) * formInline2.limit, formInline2.currentPage * formInline2.limit)"
              height="650"
              style="width: 100%; margin-top: 6px"
              :header-cell-style="{
                background: '#fafafa',
                color: '#000000e0',
                fontWeight: 600
              }"
            >
              <el-table-column prop="MC" label="课程名称"></el-table-column>
              <el-table-column prop="DM" label="课程代码"></el-table-column>
              <el-table-column prop="xbs" label="学段"></el-table-column>

              <el-table-column prop="SX_KS" label="考试属性"></el-table-column>
              <el-table-column prop="ZTMC" label="状态"></el-table-column>

              <el-table-column fixed="right" label="管理">
                <template slot-scope="scope">
                  <el-button type="text" size="small" style="color: #ff4d4f"  icon="el-icon-edit">编辑</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <div class="footer-pagination">
              <el-pagination
                @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2"
                :current-page="formInline2.currentPage"
                :page-sizes="[10, 20, 30, 50, 100, 200, 300, 500]"
                :page-size="formInline.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="formInline2.total"
              >
              </el-pagination>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import httpdict from '../../api/dict'
import httplogin from '../../api/login'
export default {
  name: 'Social',
  data() {
    return {
      radio:'1',
      tableData: [],
      tableData2:[],
      formInline: {
        xq: '',
        benqu: '',
        gzXqdm: '',
        xm: '',
        ddl_xz: '',
        ddl_jdfs: '',
        currentPage: 1,
        limit: 10,
        total: 0
      },
      formInline2: {
        xq: '',
        benqu: '',
        gzXqdm: '',
        xm: '',
        ddl_xz: '',
        ddl_jdfs: '',
        currentPage: 1,
        limit: 10,
        total: 0
      },
      ddl_lb_list: [], //类别 options
      ddl_bb_list: [], //办别 options
      ddl_xz_list: [
        {
          value: '全部',
          label: '全部'
        },
        {
          value: '普通',
          label: '普通'
        },
        {
          value: '工读',
          label: '工读'
        },
        {
          value: '特教',
          label: '特教'
        }
      ], //性质 options
      ddl_jdfs_list: [
        {
          value: '全部',
          label: '全部'
        },
        {
          value: '走读',
          label: '走读'
        },
        {
          value: '寄宿',
          label: '寄宿'
        }
      ], //就读方式 options
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible3:false,
      dialogDetails: false,
    
      schoolList: [],
      sfzlxArr: [],
      sfzjh: '',
      sfzlxval: '1',
      JiaoZhiGongInfo: {},
      faculty: {},
      countryArr: [],
      mzArr: [],
      zzmmArr: [],
      gzxiaoqu: '3101517061'
    }
  },
  // watch: {
  //   'formInline.xq': function (n, old) {
  //     let q = httplogin.getXqPhase({ 'xq': n }).then(res => {
  //       this.tableData = res.data.data.list
  //     })
  //   }
  // },
  mounted() {
    this.getSemesterway()
    this.getschoolList()
    this.TeachingCourses()
  },
  methods: {
    delclick(val){
  
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        httplogin.deleteNjXq({id:val.ID}).then(res => {
          if (res.data.code == 200) { this.$message.success(res.data.msg); this.moveFacultyListway() }

        }, err => {
          this.$message.error("接口异常" + err);
        });
      }).catch(() => { })
    },
    // 左边表格内容调接口
    async getSemesterway() {
      let res = await httplogin.getSemester()
      if (res.data.code == 200) {
        // select选择器内容
        this.ddl_lb_list = res.data.data.list
        this.formInline.xq = this.ddl_lb_list[0]
        this.moveFacultyListway()
        
      }
    },
    // 右边表格内容调接口
    async TeachingCourses() {
      let res = await httplogin.fieldClassification()
      
      if (res.data.code == 200) {
       this.tableData2=res.data.data.list
       this.formInline2.total = this.tableData2.length
      }
    },

    async moveFacultyListway() {
      let data = {
        xq: this.formInline.xq
      }
      var res = await httplogin.getXqPhase(data)
      if (res.data.code == 200) {
        this.tableData = res.data.data.list;
        this.formInline.total = this.tableData.length
      }
    },
    // 选择监听动态
    onChange(res) { 
      this.moveFacultyListway()
    },
    addjGZgz() {
      this.getshzjlxway()
      this.GetCountryway()
      this.GetMzway()
      this.GetZzmmway()
      this.dialogDetails = true
    },
    async getshzjlxway() {
      var res = await httpdict.getshzjlx()
      if (res.data.code == 200) {
        this.sfzlxArr = res.data.data.sfzlx
      }
    },
    async GetCountryway() {
      var res = await httpdict.GetCountry()
      if (res.data.code == 200) {
        this.countryArr = res.data.data.sfzlx
      }
    },
    async GetMzway() {
      var res = await httpdict.GetMz()
      if (res.data.code == 200) {
        this.mzArr = res.data.data.sfzlx
      }
    },
    async GetZzmmway() {
      var res = await httpdict.GetZzmm()
      if (res.data.code == 200) {
        this.zzmmArr = res.data.data.sfzlx
      }
    },
    async onSubmit2() {
      var data = {
        sfzjh: this.faculty.SFZJH,
        sfzjlx: this.faculty.SFZJLX,
        gzXqdm: this.gzxiaoqu,
        ydlx: '01'
      }
      var res = await httplogin.moveFaculty(data)
      if (res.data.code == 200) {
        this.$message({
          type: 'success',
          message: res.data.msg
        })
        this.moveFacultyListway()
        this.dialogDetails2 = false
      }
    },
    async getschoolList() {
      let res = await httplogin.getUserPermissionInfo()
      if (res.data.code == 200) {
        // if (res.data.data.estate == "区级") {
        this.schoolList = res.data.data.UserPermission
        this.sortPingyinfun(this.schoolList)
        // }
      }
    },
    sortPingyinfun(list) {
      list.sort((a, b) => a.XQJC.localeCompare(b.XQJC))
      return list
    },
    async shenheSel() {
      var data = {
        sfzjh: this.sfzjh,
        sfzjlx: this.sfzlxval
      }
      var res = await httplogin.examineCard(data)
      if (res.data.code == 200) {
        this.dialogDetails = false
        if (res.data.data.examine) {
          this.getFacultyinitialway()
          this.dialogDetails2 = true
        } else {
          this.$alert('本区教职工信息库没有找到该职工信息', '提示', {
            confirmButtonText: '确定',
            dangerouslyUseHTMLString: true,
            callback: action => {
              // this.$message({
              //   type: 'info',
              //   message: ``
              // });
            }
          })
        }
      }
    },

    formatSfzjlx(val) {
      for (let i = 0; i < this.sfzlxArr.length; i++) {
        if (val == this.sfzlxArr[i].dm) {
          return this.sfzlxArr[i].mc
        }
      }
    },
    formatGJDQ(val) {
      for (let i = 0; i < this.countryArr.length; i++) {
        if (val == this.countryArr[i].dm) {
          return this.countryArr[i].mc
        }
      }
    },

    formatMZ(val) {
      for (let i = 0; i < this.mzArr.length; i++) {
        if (val == this.mzArr[i].dm) {
          return this.mzArr[i].mc
        }
      }
    },
    formatZZMM(val) {
      for (let i = 0; i < this.zzmmArr.length; i++) {
        if (val == this.zzmmArr[i].dm) {
          return this.zzmmArr[i].mc
        }
      }
    },

    async getFacultyinitialway() {
      var data = {
        sfzjh: this.sfzjh,
        sfzjlx: this.sfzlxval
      }
      var res = await httplogin.getFacultyinitial(data)
      if (res.data.code == 200) {
        this.faculty = res.data.data.faculty
        console.log(this.faculty)
      }
    },
    //点击查看详情 open 弹框
    handleClick(row) {
      console.log(row)
      this.dialogDetails = true
    },
    //close 弹框
    handleClose() {
      this.dialogDetails = false
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     done();
      //   })
      //   .catch(_ => {})
    },

    onSubmit() {
      // console.log(this.formInline);
      this.moveFacultyListway()
    },
    handleSizeChange(val) {
      this.formInline.limit = val
      this.moveFacultyListway()
    },
    handleCurrentChange(val) {
      this.formInline.currentPage = val
      this.moveFacultyListway()
    
    },

    handleSizeChange2(val) {
      this.formInline2.limit = val
      this.TeachingCourses()
    },
    handleCurrentChange2(val) {
      this.formInline2.currentPage = val
      this.TeachingCourses()
    
    },
    //TeachingCourses
  }
}
</script>

<style scoped>
::v-deep .el-dialog__header {
  background-color: #ff4d4f !important;
}

::v-deep .el-dialog__title {
  line-height: 24px;
  font-size: 20px;
  color: #fff !important;
  /* font-weight: 600; */
}

.main {
  width: 100%;
  float: left;
  height: auto;
  box-sizing: border-box;
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #f6f6f6;
  overflow-x: auto;
  overflow-y: auto;
}

.main-body {
  width: 100%;
  height: auto;
  float: left;
  background-color: #fff;
  box-sizing: border-box;
  padding: 18px;
  border-radius: 12px;
}

.float-left {
  width: 100%;
  height: auto;
  float: left;
}

.main-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.d-flex {
  display: flex;
  align-items: center;
}

.mr-24 {
  margin-right: 24px;
}

.fontcolor {
  color: rgba(0, 0, 0, 0.88);
  word-break: break-word;
  line-height: 1.5714285714285714;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  font-size: 14px;
  box-sizing: border-box;
}

.footer-pagination {
  padding: 10px 0 0 0;
  text-align: right;
}

.font-all {
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  scrollbar-color: rgba(0, 0, 0, 0.25) rgba(5, 5, 5, 0.06);
}
</style>

<style scoped>
.td1 {
  border: 1px solid #8c8c8c;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: #3c3c3c;
  padding: 3px;
  /* width: 40%; */
}

.inputbox {
  text-align: center;
  line-height: 25px;
  border: 1px solid #b3b3b3;
  font-size: 13px;
  height: 25px;
  width: 96%;
}

.rblList td {
  font-size: 13px;
  color: #3c3c3c;
  border-style: none;
  text-align: left;
  height: 30px;
  line-height: 30px;
}

::v-deep .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
</style>
